<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Modify Time Slot</title>
	<style type="text/css">
		#info table {
			width: 500px;
		}
		tr {
			color: #00FF00;
		}
		td {
			display: table-cell;
			font-size: 8pt;
			width: 16px;
			height: 20px;
			vertical-align: middle;
			text-align: center;
			color: #00FF00;
		}
		td.availableSeat {
			border: 1px solid #00FF00;
		}
		td.unavailableSeat {
			border: 1px solid white;
		}
		#seatTableContainer {
			width: 500px;
			background-color: black;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script>

		$(document).ready(function(){
                    $('.boughtSeat').each(function() {
                          $(this).html('<img src="images/sold_seat2.gif" width="16" height="20">');
                       });
                    
                        $("input[type='submit']").click(function(){
                            $('#action').val($(this).attr('name'));
                        });

			$('td.availableSeat, td.unavailableSeat').click(function(){
                                $('#seatNo').val($(this).attr('id'));
				alert($(this).attr('id'));
                                
				$('#errorMessage', top.document).text(${param.errorMsg});
                                $('#hiddenData').submit();
			});
		});

	</script>
	</head>

	<body>
            <form action="Modification.do" method="get" id="hiddenData">
    	<input type="hidden" name="action" value="ChangeS">
        <input type="hidden" name="movie" value="<%= request.getParameter("movie") %>">
        <input type="hidden" name="slotID" value="<%= request.getParameter("slotID") %>">
        <input type="hidden" name="seatNo" id="seatNo" value="">
        <input type="hidden" name="house" value="<%= request.getParameter("house") %>">
        
    </form>
    <div id="modifyTimeSlot" align="center">
      <h2>Modify Time Slot</h2>
      <p id="errorMessage">${topDisplayMsg}</p>
      <div id="dataForm" align="left" style="width:500px; background: #CCC; ">
        <form action="Modification.do" method="post" enctype="application/x-www-form-urlencoded">
          <p>${thisMovie.name}</p>
          <p>Description<br>
            <em>${thisMovie.description}</em></p>
          <p>
            <label for="startTime">Show Time</label>
            <br>
            <input name="showTime" type="text" id="startTime" value="${thisMovie.movieSlot.startTime}" ${displayControl.showTimeInput}>
            <input type="submit" name="ChangeT" id="change" value="Change" style="display:${displayControl.changeSTButton}">
            <input type="submit" name="remove" id="remove" value="Remove" style="display:${displayControl.removeSTButton}">
          </p>
          <p>
            <label for="price">Price<br>
            </label>
            <input name="price" type="text" id="price" value="${thisMovie.movieSlot.price}" size="3" maxlength="3" ${displayControl.priceInput}>
            <input type="submit" name="ChangeP" id="change" value="Change" style="display:${displayControl.changePButton}">
            <input type="hidden" id="action" name="action" value="">
            <input type="hidden" name="movie" value="${thisMovie.name}">
            <input type="hidden" name="slotID" value="${thisMovie.movieSlot.slotID}">
          </p>
        </form>
      </div>
      <div id="seatTableContainer" align="center">
        <% if(request.getParameter("house").equals("1")){ %>
        <%@ include file="house1.jsp"%>
        <% } else if(request.getParameter("house").equals("2")){ %>
        <%@ include file="house2.jsp"%>
        <% } else if(request.getParameter("house").equals("3")){ %>
        <%@ include file="house3.jsp"%>
        <% } else if(request.getParameter("house").equals("4")){ %>
        <%@ include file="house4.jsp"%>
        <% } %>
      </div>
      <a href="Manage.do"><h3>Back</h3></a>
    </div>
</body>
</html>
